<template>
	<view ip="app">
		<view class="container1">
			<view class="text1">交友画像（必填）</view>
			<view class="text2">向ta表现最真实的你，这将是你们认识的第一步</view>
		</view>
		<view class="container">
			<view class="top">
				你的标签
			</view>
			<view class="label">
				<view v-for="(item, index) in youTags" :key="index">
					<view :class="[item.inverted==true?'is-checked normal':'normal' ]" @click="tagClick(item,$event)">{{item.text}}</view>
				</view>
			</view>
		</view>
		<view class="container">
			<view class="top">
				可聊话题
			</view>
			<view class="label">
				<view v-for="(item, index) in topicTags" :key="index">
					<view :class="[item.inverted==true?'is-checked normal':'normal' ]" @click="tagClick(item,$event)">{{item.text}}</view>
				</view>
			</view>
		</view>
		<view class="container">
			<view class="top">
				日常运动
			</view>
			<view class="label">
				<view v-for="(item, index) in sportTags" :key="index">
					<view :class="[item.inverted==true?'is-checked normal':'normal' ]" @click="tagClick(item,$event)">{{item.text}}</view>
				</view>
			</view>
		</view>
		<view class="container">
			<view class="top">
				音乐偏好
			</view>
			<view class="label">
				<view v-for="(item, index) in musicTags" :key="index">
					<view :class="[item.inverted==true?'is-checked normal':'normal' ]" @click="tagClick(item,$event)">{{item.text}}</view>
				</view>
			</view>
		</view>
		<view class="confirm">下一步</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				youTagsNum:0,
				youTags:[{
					text: "理想主义",
					inverted: false,
				},{
					text: "吃货一只",
					inverted: false,
				},{
					text: "双重人格",
					inverted: false,
				},{
					text: "simple",
					inverted: false,
				},{
					text: "宅",
					inverted: false,
				},{
					text: "声控",
					inverted: false,
				},{
					text: "文艺青年",
					inverted: false,
				},{
					text: "二次元",
					inverted: false,
				},{
					text: "颜控",
					inverted: false,
				},{
					text: "女汉子",
					inverted: false,
				},{
					text: "义气",
					inverted: false,
				}],
				topicTagsNum: 0,
				topicTags:[{
					text:"王者荣耀",
					inverted: false
				},{
					text:"酷爱学习",
					inverted: false
				},{
					text:"小说",
					inverted: false
				},{
					text:"创业",
					inverted: false
				},{
					text:"编程",
					inverted: false
				},{
					text:"音乐",
					inverted: false
				},{
					text:"电影",
					inverted: false
				},{
					text:"旅行",
					inverted: false
				},{
					text:"动漫",
					inverted: false
				},{
					text:"亚文化",
					inverted: false
				},{
					text:"好吃的",
					inverted: false
				},{
					text:"美妆",
					inverted: false
				},{
					text:"极限运动",
					inverted: false
				},{
					text:"街舞",
					inverted: false
				},{
					text:"黑科技",
					inverted: false
				},{
					text:"吃鸡",
					inverted: false
				},{
					text:"二次元文化",
					inverted: false
				},{
					text:"英雄联盟",
					inverted: false
				},{
					text:"NBA",
					inverted: false
				},{
					text:"音乐",
					inverted: false
				},{
					text:"时尚",
					inverted: false
				}],
				sportTagsNum: 0,
				sportTags:[{
					text:"暴走",
					inverted:false
				},{
					text:"篮球",
					inverted:false
				},{
					text:"足球",
					inverted:false
				},{
					text:"乒乓球",
					inverted:false
				},{
					text:"台球",
					inverted:false
				},{
					text:"羽毛球",
					inverted:false
				},{
					text:"排球",
					inverted:false
				},{
					text:"健身",
					inverted:false
				},{
					text:"酷宅",
					inverted:false
				},{
					text:"高尔夫",
					inverted:false
				},{
					text:"游泳",
					inverted:false
				},{
					text:"跑步",
					inverted:false
				},{
					text:"登山",
					inverted:false
				}],
				musicTagsNum: 0,
				musicTags:[{
					text:"轻音乐",
					inverted:false
				},{
					text:"古风",
					inverted:false
				},{
					text:"欧美",
					inverted:false
				},{
					text:"RAP",
					inverted:false
				},{
					text:"电子",
					inverted:false
				},{
					text:"爵士",
					inverted:false
				},{
					text:"民谣",
					inverted:false
				},{
					text:"摇滚",
					inverted:false
				},{
					text:"经典",
					inverted:false
				},{
					text:"流行",
					inverted:false
				},{
					text:"英语",
					inverted:false
				},{
					text:"粤语",
					inverted:false
				},{
					text:"古典",
					inverted:false
				}]
			}
		},
		onShow() {
			document.title = "72小时cp报名活动-填写资料";
		},
		methods: {
			tagClick(tag, e) {
				tag.inverted = !tag.inverted;	
			}
		}
	}
</script>

<style>
	#app {
	    font-family: Avenir,Helvetica,Arial,sans-serif;
	    -webkit-font-smoothing: antialiased;
	    -moz-osx-font-smoothing: grayscale;
	    text-align: center;
	    color: #2c3e50;
	}
	* {
		padding: 0;
		margin: 0;
	}
	.top {
		text-align: left;
		margin-top: 10px;
	}
	.container1 {
	    width: 95%;
		padding-bottom: 15rpx;
	    margin: 0 auto;
	    display: block;
	}
	.container {
	    width: 95%;
	    margin: 0 auto;
	    display: block;
		border: 1px solid #afafaf;border-left:none; border-right:none;border-bottom:none;
	}
	.text1 {
		padding: 15rpx;
		font-size: 28px;
	}
	.text2 {
		font-size: 12px;
		color: #dd7398;
		padding: 0,15rpx;
	}
	.normal {
	    color: #dd7398;
	}
	.normal {
	    padding: 3px 15px;
	    border-radius: 20px;
	    border: 1px solid #dd7398;
	    font-size: 12px;
	    margin-right: 10px;
	    margin-bottom: 10px;
	}
	.label {
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-flow: row wrap;
	    flex-flow: row wrap;
	    -ms-flex-line-pack: start;
	    align-content: flex-start;
	    margin-top: 10px;
		padding: 15rpx 10;
	}
	.is-checked, .normal {
	    padding: 3px 15px;
	    border-radius: 20px;
	    border: 1px solid #dd7398;
	    font-size: 12px;
	    margin-right: 10px;
	    margin-bottom: 10px;
	}
	.is-checked {
	    background-color: #dd7398;
	    color: #fff;
	}
	.confirm {
	    margin: 40px auto;
	    background-color: #dd7398;
	    color: #fff;
	    width: 80%;
	    border-radius: 10vw;
	    padding: 2vw;
	    box-sizing: border-box;
	    text-align: center;
	}
</style>
